<template>
    <div class="conter">
        <a-layout id="components-layout-demo-top-side-2">
            <!-- 上方菜单 -->
            <!-- 头部 -->
            <a-layout-header
                    class="headeconterr"
                    :class="$store.state.iconIsTrue ? 'headecolor' : ''"
            >
                <div class="logos" :class="$store.state.iconIsTrue ? 'logocolor' : ''">
                    {{ userInfo.ostitle }}
                </div>
                <div class="exploit">
                    <a-select
                            :default-value="flag ? 'zh' : 'en'"
                            style="width: 120px; margin-right: 15px"
                            @change="languageChange"
                    >
                        <a-select-option value="zh"> 中文</a-select-option>
                        <a-select-option value="en"> English</a-select-option>
                    </a-select>
                    <a-dropdown>
                        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                            <a-icon type="user"/>
                            {{userInfo.name}}
                            <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a href="javascript:;" @click="changePassword">{{
                                    $t("m.ChangePassword")
                                    }}</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;" @click="quit">{{ $t("m.LogOut") }}</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </a-layout-header>

            <a-layout-header
                    class="headeconterr"
                    :class="$store.state.iconIsTrue ? 'headecolor' : ''"
            >
                <div class="logos" :class="$store.state.iconIsTrue ? 'logocolor' : ''">
                    {{ userInfo.ostitle }}
                </div>
                <!-- 菜单 -->
                <div
                        class="flexlist"
                        :class="[
            !$store.state.isTrueSilde ? 'hid' : '',
            $store.state.iconIsTrue ? 'leftmenu' : '',
          ]"
                >
                    <a-menu
                            :defaultSelectedKeys="[$route.path]"
                            :default-selected-keys="['1']"
                            :default-open-keys="['1']"
                            @click="backs"
                            mode="horizontal"
                            :theme="daks"
                            @openChange="onOpenChange"
                    >
                        <template v-for="item in items">
                            <!-- 第一层 -->
                            <template v-if="item.children">
                                <a-sub-menu
                                        :key="item.menuId"
                                        class="item-hover"
                                        :style="$store.state.iconIsTrue ? styleObject : ''"
                                >
                  <span slot="title"
                  ><a-icon :type="item.iconCls"/><span>{{
                      item.menuName
                    }}</span></span
                  >
                                    <template v-for="subitem in item.children">
                                        <!-- 第二层 -->
                                        <template
                                                v-if="
                        subitem.children != undefined &&
                        subitem.children.length !== 0
                      "
                                        >
                                            <a-sub-menu
                                                    :key="subitem.menuId"
                                                    :title="subitem.menuName"
                                            >
                                                <template v-for="sub3 in subitem.children">
                                                    <!-- 第三层 -->
                                                    <template v-if="sub3.children">
                                                        <a-sub-menu :key="sub3.menuId">
                                                            <template v-for="sub4 in sub3.children">
                                                                <a-menu-item
                                                                        :key="sub4.menuId"
                                                                        @click="append(sub4.url)"
                                                                >
                                                                    {{ sub4.menuName }}
                                                                </a-menu-item>
                                                            </template>
                                                        </a-sub-menu>
                                                    </template>
                                                    <!-- 第三层 -->
                                                    <template v-else>
                                                        <a-menu-item
                                                                :key="sub3.menuId"
                                                                @click="append(sub3.url)"
                                                        >
                                                            {{ sub3.menuName }}
                                                        </a-menu-item>
                                                    </template>
                                                </template>
                                            </a-sub-menu>
                                        </template>
                                        <!-- 第二层 -->
                                        <template v-else>
                                            <a-menu-item
                                                    :key="subitem.menuId"
                                                    @click="append(subitem.url)"
                                            >
                                                {{ subitem.menuName }}
                                            </a-menu-item>
                                        </template>
                                    </template>
                                </a-sub-menu>
                            </template>
                            <!-- 第一层 -->
                            <template v-else>
                                <a-menu-item :key="item.menuId" @click="append(item.path)">
                                    {{ item.menuName }}
                                </a-menu-item>
                            </template>
                        </template>
                    </a-menu>
                </div>
                <div class="exploit">
                    <a-select
                            :default-value="flagA ? 'zh' : 'en'"
                            style="width: 120px; margin-right: 15px"
                            @change="languageChange"
                    >
                        <a-select-option value="zh"> 中文</a-select-option>
                        <a-select-option value="en"> English</a-select-option>
                    </a-select>
                    <a-dropdown>
                        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
                            <a-icon type="user"/>
                            {{ userInfo.name }}
                            <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a href="javascript:;" @click="changePassword">{{
                                    $t("m.ChangePassword")
                                    }}</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a href="javascript:;" @click="quit">{{ $t("m.LogOut") }}</a>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </div>
            </a-layout-header>
            <div class="layouts">
                <!-- 左侧菜单 -->
                <div
                        class="homes"
                        :class="[
            $store.state.isTrueSilde ? 'hid' : '',
            $store.state.iconIsTrue ? 'homelist' : 'last',
          ]"
                >
                    <div
                            :class="[
              collapsed === false ? 'home-fold' : 'fold',
              $store.state.iconIsTrue ? 'gangslist' : '',
            ]"
                            @click="rome()"
                    >
                        | | |
                    </div>
                    <a-menu
                            :defaultSelectedKeys="[$route.path]"
                            :selectedKeys="[$route.path]"
                            :default-selected-keys="['1']"
                            :default-open-keys="['1']"
                            @click="backs"
                            mode="inline"
                            :open-keys="openKeys"
                            :theme="daks"
                            @openChange="onOpenChange"
                            :inline-collapsed="collapsed"
                    >
                        <template v-for="item in items">
                            <!-- 第一层 -->
                            <template v-if="item.children">
                                <a-sub-menu :key="item.menuId" :style="$store.state.iconIsTrue ?styleObject:lostyle">
                  <span slot="title"
                  ><a-icon :type="item.iconCls"/><span>{{
                      item.menuName
                    }}</span></span
                  >
                                    <template v-for="subitem in item.children">
                                        <!-- 第二层 -->
                                        <template
                                                v-if="
                        subitem.children != undefined &&
                        subitem.children.length !== 0
                      "
                                        >
                                            <a-sub-menu
                                                    :key="subitem.menuId"
                                                    :title="subitem.menuName"
                                            >
                                                <template v-for="sub3 in subitem.children">
                                                    <!-- 第三层 -->
                                                    <template v-if="sub3.children">
                                                        <a-sub-menu
                                                                :key="sub3.menuId"
                                                                :style="backStyle(sub3)"
                                                                :class="[
                                sub3.menuId === key ? 'back' : '',
                                sub3.menuId === key && !$store.state.iconIsTrue
                                  ? 'backwhite'
                                  : '',
                              ]"
                                                        >
                                                            <template v-for="sub4 in sub3.children">
                                                                <a-menu-item
                                                                        :key="sub4.menuId"
                                                                        @click="append(sub4.url)"
                                                                >
                                                                    {{ sub4.menuName }}
                                                                </a-menu-item>
                                                            </template>
                                                        </a-sub-menu>
                                                    </template>
                                                    <!-- 第三层 -->
                                                    <template v-else>
                                                        <a-menu-item
                                                                :key="sub3.menuId"
                                                                :style="backStyle(sub3)"
                                                                :class="[
                                sub3.menuId === key ? 'back' : '',
                                sub3.menuId === key && !$store.state.iconIsTrue
                                  ? 'backwhite'
                                  : '',
                              ]"
                                                                @click="append(sub3.url)"
                                                        >
                                                            {{ sub3.menuName }}
                                                        </a-menu-item>
                                                    </template>
                                                </template>
                                            </a-sub-menu>
                                        </template>
                                        <!-- 第二层 -->
                                        <template v-else>
                                            <a-menu-item
                                                    :key="subitem.menuId"
                                                    :style="backStyle(subitem)"
                                                    :class="[
                          subitem.menuId === key ? 'back' : '',
                          subitem.menuId === key && !$store.state.iconIsTrue
                            ? 'backwhite'
                            : '',
                        ]"
                                                    @click="append(subitem.url)"
                                            >
                                                {{ subitem.menuName }}
                                            </a-menu-item>
                                        </template>
                                    </template>
                                </a-sub-menu>
                            </template>
                            <!-- 第一层 -->
                            <template v-else>
                                <a-menu-item
                                        :key="item.menuId"
                                        :style="backStyle(item)"
                                        :class="[
                    item.menuId === key ? 'back' : '',
                    item.menuId === key && !$store.state.iconIsTrue ? 'backwhite' : '',
                  ]"
                                        @click="append(item.path)"
                                >
                                    {{ item.menuName }}
                                </a-menu-item>
                            </template>
                        </template>
                    </a-menu>
                </div>
                <!-- </a-layout-sider>  -->
                <!-- 内容部分 -->
                <div class="layout-noe">
                    <a-layout style="padding: 0 24px 24px">
                        <!-- 路由占位符 -->
                        <router-view v-if="isRouterAlive"></router-view>
                    </a-layout>
                </div>
            </div>
        </a-layout>
        <div @click="btnDraw" ref="settingBtn" class="settingButton">
            <a-button
                    class="backBlue"
                    size="large"
                    :icon="btnIcon"
                    :style="colors($store.state.themeColor)"
            ></a-button>
        </div>
        <a-modal
                :title="$t('m.EditPassword')"
                :visible="visibleB"
                @cancel="handleCancel"
                :footer="null"
        >
            <a-form
                    :form="form"
                    :label-col="{ span: 5 }"
                    :wrapper-col="{ span: 12 }"
                    @submit="handleSubmit"
            >
                <a-form-item :label="$t('m.OldPassword')">
                    <a-input
                            type="password"
                            v-decorator="[
              'oldPwd',
              {
                rules: [{ required: true, message: this.$t('m.pleaseInput') }],
              },
            ]"
                    />
                </a-form-item>
                <a-form-item :label="$t('m.NewPassword')">
                    <a-input
                            type="password"
                            v-decorator="[
              'newPwd',
              {
                rules: [{ required: true, message: this.$t('m.pleaseInput') }],
              },
            ]"
                    />
                </a-form-item>

                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                    <a-button type="primary" html-type="submit"> 确定</a-button>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-drawer
                placement="right"
                width="300px"
                :closable="false"
                :visible="Btnvisible"
                @close="onClose"
                style="z-index: 500"
        >
            <div class="header">整体风格设置</div>
            <div class="stylize">
                <div class="containerImg" @click="imgsnoe">
                    <img src="@/assets/img/jpwhite.svg" alt=""/>
                    <svg
                            v-if="$store.state.iconIsTrue"
                            t="1645155166500"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2078"
                            width="200"
                            height="200"
                    >
                        <path
                                d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                                fill="#444444"
                                p-id="2079"
                        ></path>
                    </svg>
                </div>
                <div class="image" @click="imgstwo">
                    <img class="image" src="@/assets/img/losk.svg" alt=""/>
                    <svg
                            v-if="!$store.state.iconIsTrue"
                            t="1645155166500"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2078"
                            width="200"
                            height="200"
                    >
                        <path
                                d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                                fill="#444444"
                                p-id="2079"
                        ></path>
                    </svg>
                </div>
            </div>
            <div class="header">主题色</div>
            <div class="colorconent">
                <div
                        class="content"
                        v-for="(item, index) in colorList"
                        :key="item.title"
                        :style="colorslist(item.color)"
                        @click="idxcolor(item, index)"
                >
                    <svg
                            v-if="$store.state.themeColor == item.color"
                            t="1645155166500"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2078"
                            width="200"
                            height="200"
                    >
                        <path
                                d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                                fill="#444444"
                                p-id="2079"
                        ></path>
                    </svg>
                </div>
            </div>
            <div class="header">导航模式</div>
            <div class="stylize">
                <div class="containerImg" @click="patternLeft">
                    <img src="@/assets/img/lauld.svg" alt=""/>
                    <svg
                            v-if="!$store.state.isTrueSilde"
                            t="1645155166500"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2078"
                            width="200"
                            height="200"
                    >
                        <path
                                d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                                fill="#444444"
                                p-id="2079"
                        ></path>
                    </svg>
                </div>
                <div class="image" @click="patternTop">
                    <img class="image" src="@/assets/img/top.svg" alt=""/>
                    <svg
                            v-if="$store.state.isTrueSilde"
                            t="1645155166500"
                            class="icon"
                            viewBox="0 0 1024 1024"
                            version="1.1"
                            xmlns="http://www.w3.org/2000/svg"
                            p-id="2078"
                            width="200"
                            height="200"
                    >
                        <path
                                d="M392.533333 806.4L85.333333 503.466667l59.733334-59.733334 247.466666 247.466667L866.133333 213.333333l59.733334 59.733334L392.533333 806.4z"
                                fill="#444444"
                                p-id="2079"
                        ></path>
                    </svg>
                </div>
            </div>
        </a-drawer>
    </div>
</template>
<script>
    import Modal from "@/components/common/Modal";
    import {getPerLogout} from "@/api/perClient";
    import {editAccountAndPassword, getSysNavList, getUserInfo,} from "@/api/systemmanagement";
    import {initDynamicRoutes} from "@/router/index";
    import jsCookie from 'js-cookie'

    export default {
        name: "Home",
        components: {Modal},
        data() {
            return {
                visibleB: false,
                modal: {
                    visible: false,
                    width: "900px",
                },
                isRouterAlive: true,
                buttonColor: `2px solid ${this.$store.state.themeColor}`,
                fontColor: this.$store.state.themeColor,
                qianBackground: this.$store.state.qianBackground,
                iconIsTrue: this.$store.state.iconIsTrue, //颜色

                patterns: false, //布局
                daks: "dark",
                current: ["mail"],
                openKeys: [],
                colorList: [
                    {
                        color: "#1890ff",
                        title: "拂晓蓝",
                    },
                    {
                        color: "#f5222d",
                        title: "薄暮",
                    },
                    {
                        color: "#fa541c",
                        title: "火山",
                    },
                    {
                        color: "#faad14",
                        title: "日暮",
                    },
                    {
                        color: "#13c2c2",
                        title: "明青",
                    },
                    {
                        color: "#52c41a",
                        title: "极光绿",
                    },
                    {
                        color: "#2f54eb",
                        title: "极客蓝",
                    },
                    {
                        color: "#722ed1",
                        title: "酱紫",
                    },
                ],
                colorIndex: 0,
                colorQianList: [
                    {
                        color: "#e6f7ff",
                        title: "浅蓝",
                    },
                    {
                        color: "#fff1f0",
                        title: "薄暮",
                    },
                    {
                        color: "#fff2e8",
                        title: "火山",
                    },
                    {
                        color: "#fffbe6",
                        title: "日暮",
                    },
                    {
                        color: "#e6fffb",
                        title: "明青",
                    },
                    {
                        color: "#f6ffed",
                        title: "极光绿",
                    },
                    {
                        color: "#f0f5ff",
                        title: "极客蓝",
                    },
                    {
                        color: "#f9f0ff",
                        title: "酱紫",
                    },
                ],
                collapsed: false,
                rootSubmenuKeys: [],
                width: 170,
                items: [],
                key: "",
                form: this.$form.createForm(this, {name: "coordinated"}),
                userId: "",
                flag: true,
                isNew: true,
                btnIcon: "setting",
                flagA: true,
                Btnvisible: false,
                userInfo: {}
            };
        },
        created() {
            this._getSysNavList();
            this._getUserInfo();
            //中英文逻辑
            this.language = JSON.parse(localStorage.getItem("language"));
            if (this.language == "zh") {
                this.$i18n.locale = "zh-CN";
                this.flagA = true;
            }
            if (this.language == "en") {
                this.$i18n.locale = "en-US";
                this.flagA = false;
            }
            if (window.localStorage.getItem("isTrueSilde") !== null) {
                this.$store.state.isTrueSilde = JSON.parse(window.localStorage.getItem("isTrueSilde"))
            }
            if (window.localStorage.getItem("iconIsTrue") !== null) {
                this.$store.state.iconIsTrue = JSON.parse(window.localStorage.getItem("iconIsTrue"))
            }
            if (window.localStorage.getItem("daks") !== null) {
                this.daks = window.localStorage.getItem("daks")
            }
            if (window.localStorage.getItem("qianBackground") !== null) {
                this.$store.state.qianBackground = window.localStorage.getItem("qianBackground")
            }
            if (window.localStorage.getItem("themeColor") !== null) {
                this.$store.state.themeColor = window.localStorage.getItem("themeColor")
            }


        },
        watch: {
            Btnvisible: {
                handler(newName, oldName) {
                    if (newName == false) {
                        this.$refs.settingBtn.style.marginRight = "0";
                        this.flag = true;
                        this.btnIcon = "setting";
                    }
                    if (newName == true) {
                        this.btnIcon = "close";
                    }
                },
            },
        },
        methods: {
            //中英文切换
            languageChange(e) {
                this.isNew = false;
                localStorage.setItem("language", JSON.stringify(e));
                if (e == "zh") {
                    this.$i18n.locale = "zh-CN";
                    this.isNew = true;
                }
                if (e == "en") {
                    this.$i18n.locale = "en-US";
                    this.isNew = true;
                }
                //局部刷新
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            handleCancel() {
                this.visibleB = false;
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        values["userId"] = this.userId;
                        editAccountAndPassword(values).then((res) => {
                            if (res.data.success == true) {
                                this.$message.success("修改成功！");
                                this.visibleB = false;
                                setTimeout(() => {
                                    jsCookie.remove('campus_token')
                                    this.$router.push({path: "/login"});
                                },2000)
                            } else {
                                this.$message.warning(res.data.msg);
                            }
                        });
                    }
                });
            },
            backStyle(item) {
                if (item.menuId === this.key && this.$store.state.iconIsTrue) {
                    return `background:${this.$store.state.qianBackground};color:${this.$store.state.themeColor}`;
                } else if (item.menuId === this.key && !this.$store.state.iconIsTrue) {
                    return this.colors(this.$store.state.themeColor)

                }
            },
            btnDraw() {
                this.flag = !this.flag;
                if (this.flag == false) {
                    this.Btnvisible = true;
                    this.$refs.settingBtn.style.marginRight = "300px";
                    this.$refs.settingBtn.style.zIndex = "501";
                    this.btnIcon = "close";
                } else {
                    this.Btnvisible = false;
                    this.$refs.settingBtn.style.marginRight = "0";
                    this.btnIcon = "setting";
                }
            },
            onClose() {
                this.Btnvisible = false;
            },
            _getSysNavList() {
                getSysNavList().then((res) => {
                    sessionStorage.setItem("menu", JSON.stringify(res.data));
                    this.items = res.data;
                    const ands = res.data;
                    ands.forEach((item) => {
                        this.rootSubmenuKeys.push(item.menuId);
                    });
                    initDynamicRoutes();
                });
            },
            _getUserInfo() {
                getUserInfo().then((res) => {
                    this.userInfo = res.data.data;
                    window.localStorage.setItem("userinfo", JSON.stringify(res.data.data));
                    console.log(res)
                    // sessionStorage.setItem('userInfo',JSON.stringify(res.data.data))
                    this.userId = res.data.data.userid;
                });
            },
            backs(i, s) {
                console.log(i);
                this.key = i.key;
            },
            //切换颜色
            imgsnoe() {
                window.localStorage.setItem("iconIsTrue", true);
                this.$store.state.iconIsTrue = true;
                window.localStorage.setItem("daks", "light");
                this.daks = "light";
            },
            imgstwo() {
                window.localStorage.setItem("iconIsTrue", false);
                window.localStorage.setItem("daks", "dark");
                this.$store.state.iconIsTrue = false;

                this.daks = "dark";
            },
            //切换模式
            patternLeft() {
                this.patterns = true;
                window.localStorage.setItem("isTrueSilde", false);
                this.$store.state.isTrueSilde = false;
            },
            patternTop() {
                this.patterns = false;
                window.localStorage.setItem("isTrueSilde", true);
                this.$store.state.isTrueSilde = true;
            },
            //修改密码弹窗
            changePassword() {
                this.visibleB = true;
            },
            //跳转路由
            append(router) {
                this.$router.push(router);
            },
            //菜单功能逻辑
            onOpenChange(openKeys) {
                const latestOpenKey = openKeys.find(
                    (menuId) => this.openKeys.indexOf(menuId) === -1
                );
                if (this.rootSubmenuKeys.indexOf(latestOpenKey) == -1) {
                    this.openKeys = openKeys;
                } else {
                    this.openKeys = latestOpenKey ? [latestOpenKey] : [];
                }
            },
            rome() {
                this.collapsed = !this.collapsed;
            },
            // 退出登录
            quit() {
                getPerLogout()
                    .then((res) => {
                        // 清除cookie
                        document.cookie =
                            "campus_token=0;expires=" + new Date().toUTCString();
                        this.$router.push("/login");
                        this.$message.success("退出成功");
                    })
                    .catch((err) => {
                        this.$message.error("退出失败");
                    });
            },
            colors(item) {
                return `background:${item}`;
            },
            colorslist(item) {
                return `background:${item}`;
            },
            //赋值颜色
            idxcolor(item, idx) {
                window.localStorage.setItem("qianBackground", this.colorQianList[idx].color);
                this.$store.state.qianBackground = this.colorQianList[idx].color;
                window.localStorage.setItem("themeColor", item.color);
                this.$store.state.themeColor = item.color;
                this.buttonColor = `2px solid ${item.color}`;
                this.fontColor = item.color;
                this.colorIndex = idx
            },
        },
        computed: {
            styleObject() {
                return {
                    "--background-color": this.buttonColor,
                    "--color": this.$store.state.themeColor,
                };

            },
            lostyle() {
                return {
                    "--qian-background": "#fff",
                }
            }
        },
    };
</script>
<style lang="scss" scoped>
    .conter {
        width: 100%;
        height: 100vh;
    }

    #components-layout-demo-top-side-2 .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 28px 16px 0;
        float: left;
    }

    .logos {
        color: aliceblue;
        height: 31px;
        line-height: 31px;
        margin: 16px 28px 16px 0;
        font-size: 16px;
        font-weight: 400;
        float: left;
    }

    section {
        height: calc(100vh - 64px);
    }

    .ant-menu-submenu-title {
        padding-left: 0 !important;
    }

    header {
        display: flex;
        justify-content: space-between;
        position: fixed;
        width: 100vw;
        z-index: 10;
        align-items: center;
        min-width: 1400px;
    }

    .home-fold {
        text-align: center;
        color: #fff;
        font-size: 10px;
        cursor: pointer;
        line-height: 24px;
        letter-spacing: 0.4em;
        width: 200px;
    }

    .fold {
        text-align: center;
        color: #fff;
        font-size: 10px;
        cursor: pointer;
        line-height: 24px;
        letter-spacing: 0.4em;
        width: 80px;
        transition: 0.1s linear;
    }

    .layouts {
        display: flex;
    }

    .homes {
        height: calc(100vh - 64px);
        background: #001529;
        margin-top: 64px;
        overflow: auto;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
    }

    .layout-noe {
        flex: 1;
        height: calc(100vh - 64px);
        flex-direction: unset;
        margin-top: 64px;
        overflow: auto;
        float: right;
    }

    /deep/ .ant-table-tbody .white {
        background-color: #fff !important;
        height: 40px !important;
        border: none !important;
        padding: 0 !important;
    }

    /deep/ .ant-table-tbody .blue {
        background-color: rgba(39, 111, 255, 0.1) !important;
        height: 40px !important;
        border: none !important;
        padding: 0 !important;
    }

    .back {
        background-color: #e6f7ff;
        color: #1890ff;
    }

    // .backwhite {
    //   // background: #1890ff;
    // }
    .hid {
        display: none;
        background-color: white;
    }

    .hids {
        display: none;
    }

    .flexlist /deep/ .ant-menu-dark {
        display: flex;
    }

    .item-hover:hover {
        color: var(--color) !important;
        border-bottom: var(--background-color) !important;
    }

    .backBlue {
        background: #1890ff;
        color: #fff;
    }

    .backBlue:hover {
        color: #fff;
        background: #1890ff;
        border: 1px solid #1890ff;
    }

    .settingButton {
        position: absolute;
        right: 0;
        top: 50%;
        transition: margin-right 0.3s;
    }

    .stylize {
        margin-top: 40px;
        display: flex;
    }

    .stylize .image {
        position: relative;
        margin-left: 10px;
    }

    .containerImg {
        position: relative;
    }

    .header {
        margin-top: 15px;
    }

    .stylize svg {
        position: absolute;
        width: 30px;
        height: 30px;
        bottom: 5px;
        right: 5px;
        color: red;
    }

    .image svg {
        position: absolute;
        width: 30px;
        height: 30px;
        bottom: 5px;
        right: 5px;
        color: red;
    }

    .logocolor {
        color: #000;
    }

    .headecolor {
        background-color: white;
        box-shadow: 0 1px 4px #e2d7d7;
    }

    #app /deep/ .ant-menu-dark .ant-menu-sub {
        background-color: white;
        color: #000;
    }

    .homes .gangslist {
        background-color: white;
        color: #000;
    }

    .homelist {
        background-color: white;
    }

    .colorconent {
        display: flex;
        margin-top: 15px;
        justify-content: space-around;
    }

    .content {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        cursor: pointer;
        text-align: center;
        line-height: 20px;
    }

    .content svg {
        width: 16px;
        height: 16px;
    }

    /deep/ .ant-menu-horizontal {
        border-bottom: none !important;
    }

    /deep/ .ant-menu-horizontal > .ant-menu-submenu-selected {
        color: var(--color) !important;
        border-bottom: var(--background-color) !important;
    }

    /deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
        background: var(--color) !important;
    }

    /deep/ .ant-menu-submenu-title:hover {
        color: var(--color) !important;
    }

    /deep/ .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
    /deep/ .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after {
        background: var(--color) !important;
    }

    /deep/ .ant-menu-item:hover {
        color: var(--color) !important;
    }

    .last /deep/ .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::before,
    .last /deep/ .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow::after {
        background: var(--qian-background) !important;
    }

    .last /deep/ .ant-menu-item:hover {
        color: var(--qian-background) !important;
    }

</style>